<template>
  <div class="bg-white border border-slate-200 rounded-lg p-4">
    <div class="flex items-center justify-between mb-6">
      <h3 class="font-semibold text-slate-800 flex items-center">
        <div :class="panel.iconBg" class="w-8 h-8 rounded-lg flex items-center justify-center mr-3">
          <i :class="panel.icon" class="text-white"></i>
        </div>
        深圳AQI趋势分析报告
      </h3>
      <div class="flex items-center space-x-2">
        <span :class="panel.stepBadge" class="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full">最终结果</span>
        <div class="flex space-x-2">
          <button class="feedback-btn text-slate-400 hover:text-green-500" @click="toggleFeedback($event, 'like')">
            <i class="fas fa-thumbs-up"></i>
          </button>
          <button class="feedback-btn text-slate-400 hover:text-red-500" @click="toggleFeedback($event, 'dislike')">
            <i class="fas fa-thumbs-down"></i>
          </button>
          <button class="feedback-btn text-slate-400 hover:text-blue-500" @click="showFeedbackDialog">
            <i class="fas fa-comment"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 图表 -->
    <div class="mb-6">
      <BaseChart 
        chart-id="aqiChart"
        type="line"
        :data="chartData"
        :options="chartOptions"
        auto-resize
      />
    </div>
    
    <!-- 统计卡片 -->
    <div class="grid grid-cols-2 gap-4 mb-6">
      <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-4 rounded-lg">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-slate-600">平均AQI</p>
            <p class="text-2xl font-bold text-indigo-600">58.2</p>
          </div>
          <i class="fas fa-chart-bar text-indigo-400 text-2xl"></i>
        </div>
      </div>
      <div class="bg-gradient-to-br from-green-50 to-emerald-50 p-4 rounded-lg">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-slate-600">优良天数</p>
            <p class="text-2xl font-bold text-green-600">100%</p>
          </div>
          <i class="fas fa-leaf text-green-400 text-2xl"></i>
        </div>
      </div>
      <div class="bg-gradient-to-br from-orange-50 to-amber-50 p-4 rounded-lg">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-slate-600">最高AQI</p>
            <p class="text-2xl font-bold text-orange-600">95</p>
          </div>
          <i class="fas fa-arrow-up text-orange-400 text-2xl"></i>
        </div>
      </div>
      <div class="bg-gradient-to-br from-cyan-50 to-sky-50 p-4 rounded-lg">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-slate-600">最低AQI</p>
            <p class="text-2xl font-bold text-cyan-600">32</p>
          </div>
          <i class="fas fa-arrow-down text-cyan-400 text-2xl"></i>
        </div>
      </div>
    </div>
    
    <!-- 分析结论 -->
    <div class="bg-gradient-to-r from-purple-50 to-indigo-50 border border-purple-200 rounded-lg p-5">
      <h4 class="font-semibold text-purple-800 mb-3">AQI趋势分析报告</h4>
      <div class="text-sm text-purple-700 space-y-2">
        <div class="flex items-start space-x-2">
          <i class="fas fa-arrow-up text-purple-500 mt-0.5"></i>
          <p>深圳空气质量整体良好，AQI控制在优秀范围内</p>
        </div>
        <div class="flex items-start space-x-2">
          <i class="fas fa-arrow-down text-purple-500 mt-0.5"></i>
          <p>30天内全部达到优良标准，空气质量持续改善</p>
        </div>
        <div class="flex items-start space-x-2">
          <i class="fas fa-check text-purple-500 mt-0.5"></i>
          <p>无明显污染事件，环境治理成效显著</p>
        </div>
        <div class="flex items-start space-x-2">
          <i class="fas fa-info text-purple-500 mt-0.5"></i>
          <p>主要污染物为PM2.5，建议加强工业排放管控</p>
        </div>
      </div>
    </div>
    
    <!-- 处理时间信息 -->
    <div class="flex items-center justify-between p-3 bg-slate-50 rounded-lg mt-4">
      <span class="text-sm text-slate-600">处理完成时间</span>
      <span class="text-sm font-medium text-slate-800">{{ formatTime(panel.timestamp) }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { ResultPanel } from '../../types/home'
import { formatTime } from '../../utils/home'
import BaseChart from './BaseChart.vue'
import type { ChartData, ChartOptions } from 'chart.js'

interface Props {
  panel: ResultPanel
  conversationType: string
}

const props = defineProps<Props>()

// 图表数据
const chartData = computed<ChartData>(() => ({
  labels: ['1月11日', '1月12日', '1月13日', '1月14日', '1月15日'],
  datasets: [{
    label: 'AQI指数',
    data: [58, 73, 68, 52, 45],
    borderColor: 'rgb(99, 102, 241)',
    backgroundColor: 'rgba(99, 102, 241, 0.3)',
    borderWidth: 3,
    tension: 0.4,
    fill: true,
    pointBackgroundColor: 'rgb(99, 102, 241)',
    pointBorderColor: '#fff',
    pointBorderWidth: 2,
    pointRadius: 6,
    pointHoverRadius: 8
  }]
}))

// 图表配置
const chartOptions = computed<ChartOptions>(() => ({
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      display: true,
      position: 'top',
      labels: {
        usePointStyle: true,
        padding: 20
      }
    }
  },
  scales: {
    y: {
      beginAtZero: true,
      max: 100,
      title: {
        display: true,
        text: 'AQI指数',
        font: {
          size: 12
        }
      },
      grid: {
        color: 'rgba(0, 0, 0, 0.05)'
      }
    },
    x: {
      title: {
        display: true,
        text: '日期',
        font: {
          size: 12
        }
      },
      grid: {
        display: false
      }
    }
  }
}))

// 反馈按钮处理
const toggleFeedback = (event: Event, type: 'like' | 'dislike') => {
  const button = event.currentTarget as HTMLElement
  const isActive = button.classList.contains('text-green-500') || button.classList.contains('text-red-500')
  
  // 重置所有按钮
  const parent = button.parentElement
  parent?.querySelectorAll('.feedback-btn').forEach(btn => {
    btn.classList.remove('text-green-500', 'text-red-500')
    btn.classList.add('text-slate-400')
  })
  
  // 设置当前按钮状态
  if (!isActive) {
    if (type === 'like') {
      button.classList.remove('text-slate-400')
      button.classList.add('text-green-500')
    } else {
      button.classList.remove('text-slate-400')
      button.classList.add('text-red-500')
    }
  }
  
  console.log('Feedback:', type, !isActive ? 'added' : 'removed')
}

// 显示反馈对话框
const showFeedbackDialog = () => {
  console.log('Show feedback dialog')
  // 这里可以实现反馈对话框的逻辑
}
</script>

<style scoped>
.feedback-btn {
  transition: color 0.2s ease;
  cursor: pointer;
}

.feedback-btn:hover {
  transform: scale(1.1);
}
</style>